import React, { Component } from 'react';

import { Carousel } from 'antd-mobile';

import { getHomeSwiperList } from '../../data/api.js';
import { withRouter } from 'react-router-dom';

class RotationChart extends Component {
    state = {
        homeSwiperList: [],
        imgHeight: 176
    }

    async componentDidMount() {
        const homeSwiperList = await getHomeSwiperList();
        // console.log(homeSwiperList);
        this.setState({
            homeSwiperList: homeSwiperList.message,
        })
    }
    /* 跳转到商品详情页 */
    jumpToGoodsDetails = (goodsId) => {
        this.props.history.push("/goodsDetails" + goodsId)
    }


    render() {
        return (
            <Carousel autoplay={true} infinite>
                {this.state.homeSwiperList.map(val => (
                    <img
                        onClick={this.jumpToGoodsDetails.bind(this, val.goods_id)}
                        key={val.goods_id}
                        src={val.image_src}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' }}
                        onLoad={() => {
                            // fire window resize event to change height
                            window.dispatchEvent(new Event('resize'));
                            this.setState({ imgHeight: 'auto' });
                        }}
                    />
                ))}
            </Carousel>
        );
    }
}

export default withRouter(RotationChart);

